<template>
	<div id="RoleManerge">
		<div id="tableList" style="width: 53%; font-size: 10px;" >
			<el-table style="box-shadow:  0 0 15px lightgray;" :data="roles.data" >
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="角色名称" align="center" prop="roleName" wdith="200">
				</el-table-column>
				<el-table-column label="角色描述" align="center" prop="roleDesc" width >
				</el-table-column>
				<el-table-column label="创建时间" align="center" prop="pubDate" width="100">
					<template slot-scope="scope" >
						{{scope.row.pubDate|formate}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button size="mini" type="info" @click="detalis(scope.row._id)">详情</el-button>
						<el-button size="mini" type="danger" @click="deletePermission(scope.row._id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<div id="details" v-show="detailsShow">
			<div id="detailsTitle">系统详情</div>
			<div id="detailsContent">
				<table style="width: 100%; height:100px; border: 1px solid black;">
					<tr  v-for="(item,index) in detailsData" :key="item._id">
						<td>{{item.roleDesc}}</td>
						<td>{{item.roleName}}</td>
						<td>{{item.Permissions}}</td>
						<td>{{item.roleDesc}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default{
		
		data(){
			return {
				roles:[],
				detailsData:[],
				detailsShow:false
			}
		},
		async mounted(){
			this.loadList('findRole','roles');
		},
		methods:{
			detalis(id){
				this.detailsShow = !this.detailsShow;
				var rs = this.roles.data
				for(var i = 0;i<rs.length;i++){
					if(rs[i]._id === id){
						this.detailsData = rs[i];
					}
				}
				console.log(this.detailsData)
			}
		},
		filters:{
			formate(date) {
				var d = new Date(date);
				return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDay()
				},
			}
		}
</script>

<style lang="scss" scoped>
	#RoleManerge{
		width:100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		#details{
			width: 40%;
			height: 100%;
			background: white;
			margin-left: 20px;
			box-shadow:  0 0 15px lightgray;
			#detailsTitle{
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
		}
	}
</style>
